<template>
<view>
	<form class="addAddress" @submit="opreate">
		<view class="line">
			<view class="title">联系人</view>
			<view>
				<view>
					<text>姓名</text>
					<input type="text" name="name" v-model="im.name" placeholder="请填写收货人的姓名"/>
				</view>
				<view>
					<text>手机号码</text>
					<input type="digit" name="phone" v-model="im.phone" placeholder="请填写收货人的手机号码"/>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="title">收货地址</view>
			<view>
				<view>
					<text>所在地区</text>
					<view>
						<!-- #ifdef MP-WEIXIN -->
							<picker mode="region" :value="location" name="location" @change="selectCity">
								<view>
								{{ location.length ? im.location_p +'-'+im.location_c+'-'+im.location_a : '请选择地址' }}
								</view>
							</picker>					
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view @click="showMulLinkageThreePicker">{{ location.length ? im.location_p +'-'+im.location_c+'-'+im.location_a : '请选择地址' }}</view>
						<!-- #endif -->						
					</view>
				</view>
				<view>
					<text>详细地址</text>
					<input type="text" name="address" v-model="im.address" placeholder="请填写收货人的详细地址"/>
				</view>
			</view>
		</view>
		<view class="set">
			<view>
				<view>设置默认地址</view>
				<view>
					<radio-group @tap="setDefault">
						<view>
							<radio :class="['red', { checked: im.is_default }]" :checked="im.is_default ? true : false" />
						</view>
					</radio-group>				
				</view>			
			</view>
		</view>
		<view class="del" v-if="edit" @tap="delAddress(im.id)">
			<view>删除地址</view>
		</view>
		<view class="btn">
			<button type="warn" formType="submit">提交</button>
		</view>
	</form>
	<!-- #ifndef MP-WEIXIN -->
	<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
	@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	<!-- #endif -->
</view>	
</template>

<script>
	import graceChecker from '@/common/utils/graceChecker'
	import Mixin from './mixin'
	// #ifndef MP-WEIXIN
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
	// #endif
	export default {
		name: 'comaddr',
		props: {
			submit: Function,
			edit: {
				type: [Object, Number],
				default: () => 0
			}
		},
		// #ifndef MP-WEIXIN
		components: {
			mpvueCityPicker
		},
		// #endif
		mixins: [Mixin],
		created() {
			if (this.edit) {
				this.im.name = this.edit.name
				this.im.phone = this.edit.phone
				this.im.location_p = this.edit.location_p
				this.im.location_a = this.edit.location_a
				this.im.location_c = this.edit.location_c
				this.im.is_default = this.edit.is_default
				this.im.address = this.edit.address
				this.im.id = this.edit.id
				this.location.push(this.location_p, this.location_a, this.location_c)
			}		
		},
		data() {
			return {
				location: [],
				cityPickerValueDefault: [0,0,0],
				themeColor: '#007AFF',
				im: {
					name: '',
					phone: '',
					location_p: '',
					location_c: '',
					location_a: '',
					is_default: 0,
					address: ''
				}
			}
		},		
		methods: {
			setDefault () {
				this.im.is_default ? this.im.is_default = 0 : this.im.is_default = 1
			},
			// #ifdef MP-WEIXIN
			selectCity (e) {
				this.location = e.detail.value
				this.im.location_p = e.detail.value[0]
				this.im.location_c = e.detail.value[1]
				this.im.location_a = e.detail.value[2]
			},
			// #endif
			// #ifndef MP-WEIXIN
            showMulLinkageThreePicker() {
				uni.hideKeyboard()
                this.$refs.mpvueCityPicker.show()
            },
			onCancel (e) {
				console.log(e)
			},
            onConfirm(e) {
				const value = e.label.split('-')
				this.location = value
				this.cityPickerValueDefault = e.value
				this.im.location_p = value[0]
				this.im.location_c = value[1]
				this.im.location_a = value[2]				
            },			
			// #endif			
			opreate (e) {
				const rules = [
					{ name : "name", checkType : "notunll", errorMsg:"请输入姓名"},
					{ name: 'phone', checkType : 'phoneno', errorMsg:"请输入正确的手机号码" },
					// #ifdef MP-WEIXIN
					{ name: 'location', checkType: 'notnull', errorMsg: '请选择地址' },
					// #endif					
					{ name: 'address', checkType: 'notnull', errorMsg: '请输入详细地址' },
				]
				const formatData = e.detail.value
				const result = graceChecker.check(formatData, rules)
				if (result) {
					uni.showLoading({ mask: true })
					this.submit(this.im).then(res => {
						uni.hideLoading()
						if (res.code === 400000) {
							uni.showModal({
								title: '',
								content: res.message,
								showCancel: false,
								success: (e) => {
									if (e.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					})
				} else {
					uni.showToast({ title: graceChecker.error, icon: "none" })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../common/styles/variables.less'; 
.addAddress {
	.line {
		.title {
			height: @height;
			display: flex;
			align-items: center;
			padding: 0 15upx;
			& + view {
				padding: 0 15upx;
				background-color:white;
				& > view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					position: relative;
					&:last-of-type {
						&::after {
							display: none;
						}
					}
					.border-bottom;
					& > text { width: 120upx;text-align: justify;text-align-last:justify;padding-right: 30upx; }
					& > view { flex: 1;padding: 5upx 0; font-size:@minSize; color:@gray}
					& > input { flex: 1;}
					& > picker { font-size: @minSize}
				}
			}
		}
	}
	.del {
		padding: 20upx 15upx;
		background-color:white;
		margin-top: 20upx;
		color:@red;
	}
	.set {
		& > view {
			display: flex;
			justify-content: space-between;
			margin-top: 20upx;
			background:white;
			padding:20upx 10px;
		}
	}
	.btn {
		margin: 60upx 15px 0;
	}
}	
</style>